<template>
  <Dialog v-model="visible" title="选择父级目录" style="width: 400px;">
    <ElTree
        ref="treeEl"
        :data="dictionaryBasicTree"
        show-checkbox
        check-strictly
        default-expand-all
        :expand-on-click-node="false"
        node-key="id"
        :props="{
            // label: 'dictionaryName'
            label: treeLabel
        }"
    >
    </ElTree>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false" type="danger">取消</el-button>
        <el-button @click="submit" type="primary">
          确认
        </el-button>
      </div>
    </template>
  </Dialog>
</template>



<script setup lang="ts">


import {ref, unref, nextTick, watch, reactive, computed} from 'vue'
  import { ElTree, ElButton, ElMessage } from 'element-plus'
  import { Dialog } from "@/components";
  import { getDictionaryBasicTreeApi } from '@/api/system/dict'
  import type { DictionaryBasicTree } from '@/api/system/dict/types'
  const visible = ref(false)
  const treeEl = ref<typeof ElTree>()
  const dictionaryBasicTree = ref<DictionaryBasicTree[]>([])
  const initTree = async () => {
    const res = await getDictionaryBasicTreeApi()
    dictionaryBasicTree.value = res.data
    await nextTick()
  }
  initTree()

  let treeLabel = (data: DictionaryBasicTree) => {
    return data.dictionaryName + " " + data.dictionaryCode;
  }

  const emit = defineEmits<{
    (e: 'parentChange', data: DictionaryBasicTree): void
  }>()

  const submit = () => {
    let checkedList = treeEl.value.getCheckedNodes()
    console.log(checkedList.length)
    if (!checkedList || checkedList.length == 0) {
      ElMessage.warning('请选择父级目录')
    } else if (checkedList.length > 1) {
      ElMessage.warning('请选择一个父级目录')
    } else {
      emit('parentChange', checkedList[0])
      visible.value = false
    }
  }

  const openDialog = () => {
    initTree()
    visible.value = true
  }



  defineExpose({
    openDialog
  })
</script>
